<template>
  <div class="token-secret">
    <n-card title="秘钥管理" :bordered="true" style="max-width: 600px; margin: auto;">
      <div class="current-access-key">
        <p><strong>当前 Access Key:</strong> {{ accessKey }}</p>
        <n-button type="success" @click="copyAccessKeyToClipboard">复制</n-button>
      </div>
      <div class="secret-actions">
        <n-button type="primary" size="large" @click="generateSecretKeys">重新生成秘钥</n-button>
        <p class="hint-text">点击重新生成后，旧的秘钥将被覆盖，请妥善保存新的 Secret Key。</p>
      </div>

      <n-modal v-model:show="showModal" title="新生成的秘钥" :closable="false" style="background-color: white">
        <div style="padding: 10px 10px 10px 10px">
          <p><strong>Access Key:</strong> {{ accessKey }}</p>
          <p><strong>Secret Key:</strong> {{ secretKey }}</p>
          <p class="warning-text">注意: 该 Secret Key 只显示一次，关闭后将无法再次查看。</p>
          <div class="modal-actions" style="padding: 10px 10px 10px 10px">
            <n-button type="success" @click="copyToClipboard">一键复制</n-button>
            <n-button type="default" @click="closeModal">关闭</n-button>
          </div>
        </div>
      </n-modal>
    </n-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { NButton, NModal, NCard, useMessage } from 'naive-ui';
import apiClient from '@/api/axios'

export default defineComponent({
  name: 'TokenSecret',
  components: {
    NButton,
    NModal,
    NCard
  },
  setup() {
    const showModal = ref(false);
    const accessKey = ref('');
    const secretKey = ref('');
    const message = useMessage();


    /**
     * 向后端查询accessKey
     */
    const getLoginUserAccessKey = async function(){
      const response = await apiClient.get("/user/accessToken/get/my")
      accessKey.value = response.data.data
    }


    /**
     * 向后端发送请求重新生成accessKey和secretKey
     */
    const generateAccessToken = async function(){
      const response = await apiClient.post("/user/accessToken/generate/my")
      accessKey.value = response.data.data.accessKey
      secretKey.value = response.data.data.secretKey
    }

    // 初始化时显示当前的 Access Key
    onMounted(() => {
      accessKey.value = getLoginUserAccessKey(); // 这里替换成从服务端获取的实际 Access Key
    });

    const generateSecretKeys = () => {
      generateAccessToken()
      showModal.value = true;
    };

    const copyToClipboard = () => {
      navigator.clipboard.writeText(`Access Key: ${accessKey.value}\nSecret Key: ${secretKey.value}`);
      message.success('秘钥已复制到剪贴板');
    };

    const closeModal = () => {
      showModal.value = false;
      //关闭后那个secretKey要设置为''
      secretKey.value = ''
    };

    const copyAccessKeyToClipboard = () => {
      navigator.clipboard.writeText(accessKey.value);
      message.success('Access Key 已复制到剪贴板');
    };

    return {
      showModal,
      accessKey,
      secretKey,
      generateSecretKeys,
      copyToClipboard,
      closeModal,
      copyAccessKeyToClipboard
    };
  }
});
</script>

<style scoped>
.token-secret {
  padding: 20px;
}

.current-access-key {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.secret-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.hint-text {
  margin-top: 10px;
  color: #888;
  font-size: 14px;
  text-align: center;
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.warning-text {
  color: #f5222d;
  font-weight: bold;
  margin-top: 10px;
}
</style>
